<template>
	<div>
		<div class="head2">
			<div style="width: 30%;"></div>
			<div>
				<h3><i class="el-icon-notebook-2"></i>&nbsp;我的订单详情</h3>
			</div>

			<div class="head3">
				<div>
					<el-select size="small" v-model="find.payStaus" placeholder="付款">
						<el-option v-for="x in optPay" :key="x.v" :label="x.b" :value="x.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-select size="small" v-model="find.shipStatus" placeholder="发货">
						<el-option v-for="x in optShip" :key="x.v" :label="x.b" :value="x.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-select size="small" v-model="find.days" placeholder="下单日期">
						<el-option v-for="x in optMake" :key="x.v" :label="x.b" :value="x.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-button size="small" type="primary" icon="el-icon-search" @click="findOrdInfo"> 查询 </el-button>
				</div>
			</div>
		</div>

		<el-table :data="orders" border style="width: 100%;" highlight-current-row>
			<el-table-column type="expand">
				<template slot-scope="props">

					<table style="margin-left: 10%; margin-right: 10%; width: 60%;">
						<tr v-show="props.row.shipStatus>=1">
							<td>&nbsp;</td>
							<td>
								<b>承运:</b>
								<span>
									{{props.row.shipper}}
								</span>
							</td>
							
						</tr>
						<tr v-for="x in props.row.items">
							<td>
								<div style="width: 3vw; height:3vw;">
									<img :src="`http://127.0.0.1/api/public/showimg/${x.book.pic}`"
										style="display: block; width: 100%; height: 100%;" />
								</div>
							</td>
							<td><b>名称:&nbsp;</b>{{x.book.name}}</td>
							<td><b>数量:&nbsp;</b>{{x.num}}</td>
							<td><b>单价:&nbsp;</b>&yen;{{x.price}}</td>
						</tr>
					</table>
				</template>
			</el-table-column>

			<el-table-column prop="ordid" label="订单号" min-width="60">
			</el-table-column>
			<el-table-column prop="ship2name" label="收货人" min-width="100">
			</el-table-column>
			<el-table-column prop="ship2addr" label="收货地址" min-width="200">
			</el-table-column>
			<el-table-column prop="ship2phone" label="电话" min-width="100">
			</el-table-column>
			<el-table-column prop="shipno" label="发货单号" min-width="120">
			</el-table-column>
			<el-table-column prop="tcreate" label="下单时间" >
			</el-table-column>
			<el-table-column prop="amount" label="总价" min-width="80">

			</el-table-column>
			<el-table-column label="付款">
				<template slot-scope="scope">
					<span v-show="scope.row.payStatus==1" style="font-weight: 600;">
						已付
					</span>
					<span v-show="scope.row.payStatus==0">
						<el-link size="small" style="color: blueviolet; font-weight: 900;"
							@click="goPay(scope.row.ordid)">未付</el-link>
					</span>
				</template>
			</el-table-column>
			<el-table-column label="收货">
				<template slot-scope="scope">
					<span v-show="scope.row.shipStatus==0" style="color:#ff4e00;font-weight: 800;">
						未发
					</span>
					<span v-show="scope.row.shipStatus==1">
						<el-link size="small" style="color: blueviolet; font-weight: 900;"
							@click="goSign(scope.row.ordid)">待收</el-link>
					</span>
					<span v-show="scope.row.shipStatus==2" style="font-weight: 600;">
						已收
					</span>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex; justify-content: center;">
			<el-button type="primary" size="small" @click="showMore" style="width: 30vw;"> 显示更多</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCOrders',
		data() {
			return {
				optPay: [{
					v: '',
					b: '-请选择-'
				}, {
					v: 0,
					b: '未付款'
				}, {
					v: 1,
					b: '已付款'
				}],
				optShip: [{
					v: '',
					b: '-请选择-'
				}, {
					v: 0,
					b: '未发货'
				}, {
					v: 1,
					b: '已发货'
				}, {
					v: 2,
					b: '已签收'
				}],
				optMake: [{
					v: '',
					b: '-请选择-'
				}, {
					v: 7,
					b: '7天内'
				}, {
					v: 15,
					b: '15天内'
				}, {
					v: 30,
					b: '30天内'
				}, {
					v: 60,
					b: '60天内'
				}, {
					v: 120,
					b: '120天内'
				}],
				find: {
					days: 7
				},
				orders: [],
				items: [],
				pagenum: 1,
				num: 5,
				total: 0
			}
		},
		methods: { //处理函数
			goSign(ordid) {
				this.$alert("无接口，待开发")
			},
			goPay(ordid) {
				this.$router.push('/pc/par2?ordid=' + ordid)
			},
			findOrdInfo() {
				this.orders = [];
				this.start = 0;
				this.total = 0;
				this.curordid = 0;
				this.pagenum = 1;
				this.$postx("/api/fore/ord/findPageOrders/" + this.pagenum + "/" + this.num,
						this.find)
					.then(resp => {
						console.log(resp.data)
						if (resp.data.code != 200) {
							this.$message.error(resp.data.msg);
							return;
						}
						this.orders = resp.data.data.orders;
						this.total = resp.data.data.total;
						console.log(this.orders)
					})
			},
			showMore() {
				if (this.pagenum * this.num > this.total) {
					this.$message.error("没有更多了记录了");
					return;
				}
				this.pagenum++;
				this.$postx("/api/fore/ord/findPageOrders/" + this.pagenum + "/" + this.num,
						this.find)
					.then(resp => {
						let lines = resp.data.data.orders;
						this.orders.push(...lines);
						this.total = resp.data.data.total;
						console.log(this.orders)
					})
			},
		},
		mounted() {
			this.$postx("/api/fore/ord/findPageOrders/" + this.pagenum + "/" + this.num, this.find)
				.then(resp => {
					console.log(resp.data.data);
					this.orders = resp.data.data.orders;
					this.total = resp.data.data.total;
					console.log(this.orders)
				})
		}
	}
</script>

<style scoped>
	 .head3 {
		  display: flex; justify-content: flex-end;
		  width: 50vw;
	   }	
	   .head3 div {
		   max-width: 10vw;
		   margin-right: 3px;
	   }
</style>